<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blur</title>
    <style>
        body {
            background-image: url('img/blur2.jpg');
            background-size: cover
        }
    </style>
    <style>
    .highlight {
        font-weight: bold;
        color: rgb(42, 42, 91);
        font-size: 24px;
    }
    </style>
    <style>
        .center-image {
            text-align: center;}
    </style>    
</head>
<body>
   <h1>Blur</h1>
   <p>Who's blur?</p> 
   <p>The most <span class="highlight">talanted</span>, <span class="highlight">handsome</span> and<span class="highlight"> charming</span> british rock band in the world!</p>
   <div style="text-align: center;">
    <hr>
    <p><span>please look at the pictures!</span></p>
   <div class="center-image">
    <img src="img/blur1.jpg">
    </div>
<p><del>Dan Abnormal</del>
<br>Damon Albarn
<br><del>Lee Jaxsam</del>
<br>Alex James
<br><del>Morgan C.Hoax</del>
<br>Graham Coxon
<br><del>Trevor Dewane</del>
<br>Dave Rowntree
</p>
<p>
<a href="https://en.wikipedia.org/wiki/Blur_(band)">
  <button>wikipedia</button></a>
<br><a href="https://www.blur.co.uk/">
  <button>official website</button></a>
<br><a href="https://www.youtube.com/watch?v=8gaviISiDUE">
  <button>Coachella2024</button></a>
</p>
  <script>
     alert("WELCOME!!");
  </script>
      <h2>What's your favorite song of Blur?</h2>
      <form id="favorite-song-form">
          <label for="song-select">Choose your favorite song:</label>
          <select id="song-select" name="song">
              <option value="Song 2">Song 2</option>
              <option value="Jet">Jet</option>
              <option value="Coffee & TV">Coffee & TV</option>
              <option value="Parklife">Parklife</option>
              <option value="Others">Others</option>
          </select>
          <div style="margin-top: 10px;">
              <label for="custom-song">If Others, please specify:</label>
              <input type="text" id="custom-song" name="customSong" placeholder="Enter your favorite song" disabled>
          </div>
          <div style="margin-top: 20px;">
              <button type="button" onclick="submitForm()">Submit</button>
          </div>
      </form>
      <div id="result" style="margin-top: 20px;"></div>
  
      <script>
          const songSelect = document.getElementById('song-select');
          const customSongInput = document.getElementById('custom-song');
          songSelect.addEventListener('change', () => {
              if (songSelect.value === "Others") {
                  customSongInput.disabled = false;
              } else {
                  customSongInput.disabled = true;
                  customSongInput.value = "";
              }
          });
  
          function submitForm() {
              const selectedOption = songSelect.value;
              let resultText = "Your favorite song is: ";
  
              if (selectedOption === "Others") {
                  const customSong = customSongInput.value.trim();
                  if (customSong) {
                      resultText += customSong;
                  } else {
                      alert("Please enter your favorite song!");
                      return;
                  }
              } else {
                  resultText += selectedOption;
              }
              document.getElementById('result').innerText = resultText;
          }
      </script>
  <h2>Do you think listening to Blur is a guilty pleasure?</h2>
      <form id="blur-guilty-form"
          <label>
              <input type="radio" name="guilty" value="Yes"> Yes
          </label><br>
          <label>
              <input type="radio" name="guilty" value="No"> Of course not
          </label><br><br>
          <button type="button" onclick="checkAnswer()">Submit</button>
      </form>

      <div id="result" style="margin-top: 20px;"></div>
  
      <script>
          function checkAnswer() {
              const form = document.getElementById('blur-guilty-form');
              const selectedOption = form.elements['guilty'].value;
  
              if (selectedOption === "Yes") {
                  alert("Are you Liam Gallagher?");
              } else if (selectedOption === "No") {
                  document.getElementById('result').innerText = "Good taste!";
              } else {
                  alert("Please select an option.");
              }
          }
      </script>
  <script>
    window.onbeforeunload = function() {
        return "GOODBYE!!";
    };
</script>
  <footer>
    <p>© 2024 Blur Not Official Fan Page</p>
</footer>    
</body>
</html>